import React from "react";
import Chart from "echarts-for-react";
import PublicService from '../../../services/PublicService';
import request from '../../../utils/request';
import echarts from 'echarts'

class LeftTopTU extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            disList: {}
        }

    }


    componentWillReceiveProps() {
        
        setTimeout(() => {
            console.log(this.props)
            this.onsave()
        },1000)
      
    }
    onsave = () => {

        request({
            url: `/zhrq-web/patrol/patroltask/getFromData`,
            method: 'post',
            data:{...this.props}
        }).then(data => {
            console.log(data)
            if (data.rc === 0) {
                this.setState({
                    disList: data.ret.order
                })
            }
        })
    }



    setOption = () => {
        let data = this.state.disList
        return {


           
            //tooltip: {
            //    trigger: 'item',
            //    formatter: "{a} <br/>{b}: {c} ({d}%)"
            //},
            legend: {
                // orient: 'vertical',
                x: 'right',
                data: data.nameList
            },
            series: [
                {
                    name: '订单数量',
                    type: 'pie',
                    radius: ['40%', '60%'],
                    center: ['40%', '50%'],
                    label: {
                        normal: {
                            formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                            backgroundColor: '#eee',
                            borderColor: '#aaa',
                            borderWidth: 1,
                            borderRadius: 4,
                            // shadowBlur:3,
                            // shadowOffsetX: 2,
                            // shadowOffsetY: 2,
                            // shadowColor: '#999',
                            // padding: [0, 7],
                            rich: {
                                a: {
                                    color: '#999',
                                    lineHeight: 14,
                                    align: 'center'
                                },
                                // abg: {
                                //     backgroundColor: '#333',
                                //     width: '100%',
                                //     align: 'right',
                                //     height: 22,
                                //     borderRadius: [4, 4, 0, 0]
                                // },
                                hr: {
                                    borderColor: '#fff',
                                    width: '100%',
                                    borderWidth: 0.5,
                                    height: 0
                                },
                                b: {
                                    fontSize: 12,
                                    lineHeight: 14
                                },
                                per: {
                                    color: '#fff',
                                    backgroundColor: '#334455',
                                    padding: [2, 4],
                                    borderRadius: 2
                                }
                            }
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '18',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    data:data.data
                }
            ]
        };



    }

    render() {

        return (

            <Chart option={this.setOption()} notMerge lazyUpdate style={{ height: "27vh" }}
                echartsInstance={this.save}
            />




        );
    }

}

export default LeftTopTU;
